<div style="margin-top: 100px;"></div>
<div class="layui-main">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input name="searchName" placeholder="请输入用户姓名" lay-verify="required" autocomplete="off" class="layui-input" type="tel">
                </div>
                <button class="layui-btn" lay-submit="#" lay-filter="search">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
  <table class="layui-hide" id="table"></table>
  <table>

  </table>
</div>
<script type="text/html" id="switchStatus">
  <input type="checkbox" name="status" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="checkStatus" {{ d.status == 1 ? 'checked' : '' }} />
</script>

<script>
  layui.use(['table'], function(){
      var table = layui.table;
      var form = layui.form;
      var render = table.render({//便于重载
          elem: '#table',
          url: '/users',
          cols: [[
              {type: 'numbers', title: '序号'},
              {field: 'username', title: '用户名'},
              {field: 'title', title: '权限组'},
              {field: 'phone', title: '手机号'},
              {field: 'status', title: '状态', templet: '#switchStatus'}
          ]],
          page: true,
          response: {
              statusName: 'status',
              statusCode: 200,
              dataName: 'data'
          }
      });
      //监听状态操作
      form.on('switch(checkStatus)', function (obj) {
          var status = 1;
          if (obj.value) {
              status = 0;
          }

      });
      form.on('submit(search)', function (data) {
          layer.alert(JSON.stringify(data.field), {
              title: '最终的提交信息'
          })
      })
  })
</script>
